import HeaderList from '../components/HeaderList'
import styles from "../css/Issue.module.scss"
import { useState, useEffect } from "react"
import { getIssue } from "../api/issue"
import IssueItem from '../components/IssueItem'
import { Pagination } from 'antd';
import AddIssueBtn from '../components/AddIssueBtn'
import Recommend from '../components/Recommend'
import ScoreRank from '../components/ScoreRank'
import TypeSelect from '../components/TypeSelect'
import { useSelector } from 'react-redux'
import { IStore } from '../redux/typings'

function Issues() {
    const [pageInfo, setPageInfo] = useState({
        current: 1,
        pageSize: 5, //每页显示15条数据
        total: 0
    })
    const [issueInfo, setIssuInfo] = useState([])
    const { issueTypeId } = useSelector((state: IStore) => state.type)
    const [options, setOptions] = useState({
        current: 1,
        pageSize: 5,
        issueStatus: true,
        typeId: ""
    })

    const fetchData = async () => {
        const { data } = await getIssue(options);
        setPageInfo({
            current: data.data.currentPage,
            pageSize: data.data.eachPage,
            total: data.data.count
        })
        setIssuInfo(data.data.data)
    }

    useEffect(() => {
        fetchData()
    }, [options.current, options.pageSize, options.typeId])

    let issueList = [];
    for (let i = 0; i < issueInfo.length; i++) {
        issueList.push(<IssueItem key={i} issueItemData={issueInfo[i]} />)
    }
    // 处理翻页的回调函数
    const onChange = (current: number, pageSize: number) => {
        setOptions({
            current,
            pageSize,
            issueStatus: true,
            typeId: options.typeId
        })
    }

    useEffect(() => {
        setOptions({
            current: 1,
            pageSize: options.pageSize,
            issueStatus: true,
            typeId: issueTypeId === "all" ? '' : issueTypeId
        })
    }, [issueTypeId])

    return (
        <div className={styles.container}>
            {/* 头部 */}
            <HeaderList title="问答列表">
                <TypeSelect />
            </HeaderList>
            {/* 下面的内容区 */}
            <div className={styles.issueContainer}>
                {/* 左边区域 */}
                <div className={styles.leftSide}>
                    {issueList}
                    {issueInfo.length > 0 ? (
                        <div className="paginationContainer">
                            <Pagination
                                {...pageInfo}
                                defaultCurrent={1}
                                showSizeChanger
                                showQuickJumper
                                onChange={onChange}
                            />
                        </div>
                    ) : <div className={styles.noIssue}>有问题，就来coder station</div>}

                </div>
                {/* 右边区域 */}
                <div className={styles.rightSide}>
                    <AddIssueBtn />
                    <div style={{ marginBottom: "20px" }}>
                        <Recommend />
                    </div>
                    <ScoreRank />
                </div>
            </div>
        </div>
    )
}

export default Issues
